<!--
  unfoldFirst: Boolean 是否展开第一项
 -->
<template>
  <div :class='$style.wrap'>
    <div :class='$style.title'><img src='~assets/images/icon_ts_2x.png' :class='$style.icon'/>今日相似度最高</div>
    <div :class='$style.content'>
      <div :class='$style.loading' v-if='loading.status.length > 0' @click='fetchData'>
        <img v-if='!loading.isLoading' src="~assets/images/error_2x.png">
        <div v-text='loading.status'></div>
      </div>
      <div v-for='(item, index) in stocks'>
        <div>
          <k-title
            :isShare='isShare'
            :titleFirst='item.STOCK_NAME'
            :codeFirst='filterMarketCode(item.MARKET_CODE) + item.STOCK_CODE'
            :titleSecond='item.TOP_STOCK_NAME' :codeSecond='filterMarketCode(item.TOP_MARKET_CODE) + item.TOP_STOCK_CODE' :similarity='(item.TOP_SIMILARITY * 100).toFixed(2) + "%"'
            :unfold='item.unfold'
            :index='index + 1'
            @unfold='onUnfold(item)'/>
        </div>
        <!-- <transition :enter-class='$style.fade_enter' :enter-active-class='$style.fade_enter_active' :leave-class='$style.fade_leave' :leave-active-class='$style.fade_leave_active'> -->
          <dkl v-if='item.unfold' :contrast='item' :isShare='isShare'></dkl>
        <!-- </transition> -->
        <div :class="$style.line" v-if='!item.unfold && index !== (stocks.length - 1)'></div>
      </div>
      <div v-if='nodata' :class='$style.nodata' @click='fetchData'>
        <img src='~assets/images/nodata_2x.png'/>
        <div :class='$style.text'>今日未找到K线走势相似度高的个股哦！点击重试</div>
      </div>
    </div>
  </div>
</template>

<style lang="less" module>
.wrap{
  width: 100%;
  color: #555;
  background-color: #fff;
  .title{
    text-align: left;
    font-size: 28px;
    border-bottom: solid 1px #eaeaea;
    padding: 30px;
    // margin: auto 28px;
    background-color: #fff;
    .icon{
      vertical-align: middle;
      margin-right: 12px;
      width: 38px;
    }
  }
  .content{
    .loading{
      padding: 20px;
      color: #aaa;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      img{
        width: 130px;
      }
    }
    .fade_enter_active, .fade_leave_active {
      transition: opacity 0.5s;
    }
    .fade_enter, .fade_leave{
      opacity: 0;
    }
    .line{
      border-bottom: solid 1px #eaeaea;
      margin: auto 28px;
    }
    .nodata{
      img{
        width:230px;
        padding: 26px 0 0 0;
      }
      .text{
        font-size:24px;
        color:#999;
        padding:20px 0 30px 0;
      }
    }
  }
}
</style>

<script>
  import Title from './title'
  import doubleKLine from './doubleKLine'
  import RemoteDAO from '@/common/RemoteDAO'
  import CommonUtil from '@/common/common.util'
  import Constant from '@/common/constant'
  import jquery from 'jquery'
  // import filterMarketCode from '@/filters/filterMarketCode'
  export default {
    components: {'k-title': Title, 'dkl': doubleKLine},
    props: {
      unfoldFirst: {
        type: Boolean,
        default: false
      }
    },
    filters: {
      // filterMarketCode
    },
    data () {
      return {
        stocks: [],
        loading: {
          isLoading: false,
          status: ''
        },
        isShare: false,
        dataURL: '',
        nodata: false
      }
    },
    mounted () {
      this.dataURL = CommonUtil.getUrlParam('url') || this.$route.query.url
      if (this.dataURL && this.dataURL !== '') this.isShare = true
      this.fetchData()
      // for (var i = 0; i < this.stocks.length; i++) {
      //   if (i === 0) {
      //     this.$set(this.stocks[i], 'unfold', this.unfoldFirst)
      //   } else this.$set(this.stocks[i], 'unfold', false)
      // }
    },
    methods: {
      filterMarketCode (marketCode) {
        switch (marketCode) {
          case '1':
            return 'SH'
          case '2':
            return 'SZ'
          default:
            return 'SH'
        }
      },
      fetchData () {
        this.nodata = false
        if (this.loading.isLoading) return
        this.loading.isLoading = true
        this.loading.status = '加载中...'
        this.isShare ? this.fetchDataFromURL() : this.fetchDataFromApp()
      },
      fetchDataFromURL () {
        jquery.ajax({
          url: this.dataURL,
          jsonp: 'callback',
          dataType: 'jsonp',
          jsonpCallback: 'niurenshare',
          success: (response) => {
            this.stocks = response.stocks
            this.loading.isLoading = false
            this.loading.status = ''
            this.initWXShare()
          },
          error: (err) => {
            console.error(err)
          }
        })
      },
      fetchDataFromApp () {
        var args = {
          recommType: '',
          reqNum: ''
        }
        RemoteDAO.callUC12005213(args).then(resp => {
          this.processData(resp.data.body)
          this.loading.isLoading = false
          this.loading.status = ''
          this.updateShareData()
        }, reject => {
          this.loading.isLoading = false
          this.loading.status = reject + '，点击重试'
          console.error('12005213' + reject)
        })
      },
      processData (data) {
        if (data.length <= 0) this.nodata = true
        for (let i = 0; i < data.length; i++) {
          if (i === 0) data[i].unfold = this.unfoldFirst
          else data[i].unfold = false
          // data[i].templateStock = null
          // data[i].similarStock = null
          // data[i].MARKET_CODE = this.filterMarketCode(data[i].MARKET_CODE)
          this.stocks.push(data[i])
        }
      },
      onUnfold (item) {
        // this.$set(item, 'unfold', !item.unfold)
        item.unfold = !item.unfold
        if (!item.unfold) {
          if (!this.isShare) {
            this.maiDian('004005', item)
          } else {
            this.maiDian('004018', item)
          }
        }
      },
      initWXShare () {
        if (!this.stocks || this.stocks.length === 0) return
        var title = '今天' + this.stocks[0].STOCK_NAME + '和' + this.stocks[0].TOP_STOCK_NAME + '的相似度最高，高达百分之' + (this.stocks[0].TOP_SIMILARITY * 100).toFixed(2) + '，快来围观'
        var content = '大数据智能精准匹配，海量数据帮你来找相似K线。快来找找和你的自选相似的股票吧！'
        var icon = ''
        window.weixinShare(title, content, icon, window.location.href)
      },
      updateShareData () {
        if (this.stocks.length === 0) return
        var isInStockPage = false
        if (this.$route.path === '/stock') {
          isInStockPage = true
        }
        if (!isInStockPage) {
          localStorage.setItem(isInStockPage ? 'stock' : Constant.IndexPageName, JSON.stringify({stocks: this.stocks, shareTitle: '今天' + this.stocks[0].STOCK_NAME + '和' + this.stocks[0].TOP_STOCK_NAME + '的相似度最高，高达百分之' + (this.stocks[0].TOP_SIMILARITY * 100).toFixed(2) + '，快来围观'}))
        } else {
          var stock = JSON.parse(localStorage.getItem('stock')) || {}
          stock.stocks = this.stocks
          localStorage.setItem('stock', JSON.stringify(stock))
        }
      },
      maiDian (id, item) {
        let TDAPP = window.TDAPP
        TDAPP.onEvent(id, '', {userCode: '', stockCode1: item.STOCK_CODE, stockCode2: item.TOP_STOCK_CODE})
        TDAPP.send()
      }
    }
  }
</script>
